<template>
  <div>
    <div>
      <el-row :gutter="20" style="line-height: 35px;">
        <el-col style="width: 300px;display: flex;">
          <div class="item_label">开票区间:</div>
          <el-date-picker type="daterange" v-model="filterData.daterange" size="mini" start-placeholder="起始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" range-separator="至" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">发票类型:</div>
          <el-select v-model="filterData.type" placeholder="发票类型" size="mini" clearable style="width: 100%;">
            <el-option label="增值税普票" value="增值税普票"></el-option>
            <el-option label="增值税专票" value="增值税专票"></el-option>
          </el-select>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">进项票号码:</div>
          <el-input v-model="filterData.fphm" style="width: 100%;" placeholder="销项数电票号码或纸质发票号码" size="mini"
            clearable></el-input>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">开票名称:</div>
          <el-input v-model="filterData.title" style="width: 100%;" placeholder="货物或服务名称" size="mini"
            clearable></el-input>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">开票类目:</div>
          <el-input v-model="filterData.taxname" style="width: 100%;" placeholder="开票类目" size="mini"
            clearable></el-input>
        </el-col>

        <el-col style="width: 280px;display: flex;">
          <div class="item_label">规格型号:</div>
          <el-input v-model="filterData.model" style="width: 100%;" placeholder="规格型号" size="mini" clearable></el-input>
        </el-col>
        <el-col style="width: 300px;display: flex;">
          <div class="item_label">购方名称:</div>
          <el-select v-model="filterData.buyer" style="width: 100%;" size="mini" placeholder="购方名称" filterable allow-create     clearable>
            <el-option v-for="(item,index) in buyerlist" :label="item.title" :value="item.title" :key="index">
            </el-option>
          </el-select>
        </el-col>

        <el-col style="width: 280px;display: flex;">
          <div class="item_label">销方名称:</div>
          <el-select v-model="filterData.seller" style="width: 100%;" size="mini" placeholder="销方名称" filterable
            clearable>
            <el-option v-for="(item,index) in sellerlist" :label="item.name" :value="item.name" :key="index">
            </el-option>
          </el-select>
        </el-col>
        <el-col style="width: 200px;display: flex;">
          <el-button type="primary" icon="el-icon-search" @click="currentRow=null;loadDataList()"
            size="mini">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <div style="text-align: right;">
        <div style="margin-bottom: 5px;">
          <el-dropdown split-button type="primary" size="mini" @command="handleExport">
            导出数据
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="export_check">导出选中项</el-dropdown-item>
              <el-dropdown-item command="export_all">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="table-wraper">
        <el-table :data="talbeData" height="100%" stripe  border :cell-style="rowClass">
          <el-table-column label="" type="selection" align="center" width="60px" fixed="left"></el-table-column>
          <el-table-column label="序号" type="index" align="center"></el-table-column>
          <el-table-column label="开票日期" prop="date" width="100px" align="center"      show-overflow-tooltip></el-table-column>
          <el-table-column label="销项或数电票号码" prop="fphm" width="160px" align="center"></el-table-column>
          <el-table-column label="购方单位名称" prop="buyer" align="center"  width="200px"   show-overflow-tooltip></el-table-column>
          <el-table-column label="类型" prop="type" align="center" width="140px">
            <template v-slot="scope">
              {{scope.row.type}}({{scope.row.rate*100}}%)
            </template>
          </el-table-column>
          <el-table-column label="税收分类及名称" width="160px" show-overflow-tooltip>
            <template v-slot="scope">
              *{{scope.row.taxname}}*{{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label="规格型号" prop="model" show-overflow-tooltip></el-table-column>
          <el-table-column label="销售" align="center">
            <el-table-column label="单位" prop="unit" width="80px" align="center"></el-table-column>
            <el-table-column label="数量" prop="count" width="80px" align="center"></el-table-column>
            <el-table-column label="单价" prop="price" align="center" width="80px"  show-overflow-tooltip></el-table-column>
            <el-table-column label="金额" prop="total" width="100px" align="center"></el-table-column>
            <el-table-column label="税率" width="60px" align="center">
              <template v-slot="scope">
                {{scope.row.rate*100}}%
              </template>
            </el-table-column>
            <el-table-column label="税额" prop="tax" width="100px" align="center"></el-table-column>
             <el-table-column label="价税总额" prop="sum" width="100px" align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="采购" align="center">
          <el-table-column label="已购数量" prop="buyticket_bindcount" width="80px" align="center"></el-table-column>
          <el-table-column label="未购数量" prop="unbuycount" width="80px" align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="关联进项票号" prop="buyticket_bindnum"  align="center" width="120px" show-overflow-tooltip></el-table-column>
          <el-table-column label="销售单位名称" prop="seller" width="200px" show-overflow-tooltip></el-table-column>


        </el-table>
      </div>
      <div style="display: flex;">
        <div style="flex: 1; line-height: 35px;">
          结余数量: 结余总额:
        </div>
        <div>
          <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
            :current-page="curpage" prev-text="上一页" next-text="下一页" :page-sizes="[20, 25, 30]"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import * as XLSX from "xlsx";
   export default {
    data() {
      return {
        filterData: {
          daterange: '',
          type: '',
          fphm: '',
          taxname: '',
          model: '',
          title: '',
          buyer: '',
          seller: ''
        },
        buyerlist: [],
        sellerlist: [],
        talbeData: [],
        curpage: 1,
        pagesize: 20,
        numrows: 1
      }
    },
    mounted() {
      this.loadBuyerList();
      this.loadSellerList();
      this.loadDataList();
    },
    methods: {
      rowClass({ row, column, rowIndex, columnIndex }){
        if(column.label=="未购数量"){
          return {background:'#ffefe0',color:'#FF0000'}
        }
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          daterange: this.filterData.daterange,
          type: this.filterData.type,
          fphm: this.filterData.fphm,
          title: this.filterData.title,
          taxname: this.filterData.taxname,
          model: this.filterData.model,
          buyer: this.filterData.buyer,
          seller: this.filterData.seller,
          curpage: this.curpage,
          pagesize: this.pagesize
        };
        this.axios.post("api/admin/unbuy/list", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.talbeData = res.data.list;
            this.numrows = res.data.numrows;
          }
        })
      },
      loadBuyerList() {
        this.axios.post("api/admin/client/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.buyerlist = res.data.list;
          }
        });
      },
      loadSellerList() {
        this.axios.post("api/admin/supplier/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.sellerlist = res.data.list;
          }
        });
      },
      handleExport(cmd) {
        switch (cmd) {
          case "export_check":

             break;
          case "export_all":
          this.handleExportSelection()
            break;
        }
        console.log(cmd);
      },
      handleExportSelection(){
        console.log(XLSX);
        const wb = XLSX.utils.book_new();

        //处理数据
        var expdata = [];
        expdata.push(["序号", "开票日期", "发票类型", "税收分类","货物或服务名称", "规格型号", "单位", "已售数量", "单价", "小计","购入数量","未购数量"]);

        var index = 1;
        this.talbeData.forEach((g) => {
          expdata.push([index,g.date,g.type,g.taxname,g.title, g.model, g.unit, g.count, g.price, g.sum]);
          index++;
        })
        //expdata.push(["", "", "", "", "", "", "", "", this.suptotal]);
        const ws = XLSX.utils.aoa_to_sheet(expdata);
        XLSX.utils.book_append_sheet(wb, ws, "开票清单");
        XLSX.writeFile(wb, "批量开票清单.xlsx");

      },
      handleExportAll(){

      }

    }
  }
</script>

<style scoped>
  .item_label {
    width: 85px;
    line-height: 30px;
  }

  .table-wraper{
    height:calc(100vh - 220px);
  }
</style>
